<!--
 * @Description: 部门管理
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-09-09 15:14:07
 * @LastEditTime: 2025-09-26 16:16:25
-->
<template>
  <!-- 树结构表格 使用 row-key -->
  <TablePage
    v-model:cols="tableCols"
    v-model:toolsOptions="toolsOptions"
    v-model:rowBtnsOptions="rowBtnsOptions"
    row-key="id"
    :usingPaging="false"
    :listRequest="getAllDept"
    :afterListRequest="afterListRequest"
  >
    <template #editParent="editParams">
      <fy-tree-select
        v-model="editParams.val.pid"
        :data="treeSelectData"
        :option="{ children: 'children', label: 'name' }"
      />
    </template>
  </TablePage>
</template>

<script lang="ts" setup>
import { ref, computed, Ref } from "vue";
import { rawList2Tree } from "@/ui";
import useTableCols from "./hooks/useTableCols";
import useToolsOptions from "./hooks/useToolsOptions";
import useRowBtnsOptions from "./hooks/useRowBtnsOptions";
import TablePage from "@/components/TablePage/index.vue";
import { getAllDept } from "@/api/sys";

// 配置项
defineOptions({ name: "DeptList", isFull: true });

// 部门数据
const deptRawData = ref<Recordable[]>([]);
const deptTreeData = ref<unknown[]>([]);

// 列表数据处理钩子
const afterListRequest = (dataList: Ref<Recordable[]>) => {
  const treeList = rawList2Tree({ rawList: dataList.value });
  deptRawData.value = dataList.value;
  deptTreeData.value = treeList;
  dataList.value = treeList;
};

// 上级部门树结构选择数据
const treeSelectData = computed(() => {
  return [
    {
      id: "all",
      name: "主类目",
      children: deptTreeData.value,
    },
  ];
});

// 表格配置
const tableCols = useTableCols();
const toolsOptions = useToolsOptions();
const rowBtnsOptions = useRowBtnsOptions();
</script>
